<!-- 火车票资料卡-->
<!-- 根据资料搜索线路-->
<template>
  <div id="trainDataCardDiv">
    <el-form id="trainDataCardSearchForm">
      <div id="navigationDiv">
        <img src="../../assets/images-train/Train.png" alt=""/>
        <span>火车票</span>
      </div>
      <el-form-item class="trainItem" label="出发城市">
        <el-col :span="12">
          <el-autocomplete
              class="animate__animated animate__fadeInRight"
              v-model="startPlace"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
          ></el-autocomplete>
        </el-col>
      </el-form-item>
      <div id="exchange">
        <el-button
            class="train_button animate__animated animate__fadeIn"
            @click="trainSwitch"
            type="success"
            :icon="Switch"
            circle
            style="margin-left: 25px; transform: rotate(270deg)"/>
      </div>
      <el-form-item class="trainItem" label="到达城市">
        <el-col :span="12">
          <el-autocomplete
              class="animate__animated animate__fadeInRight"
              v-model="endPlace"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
          ></el-autocomplete>
        </el-col>
      </el-form-item>

      <el-form-item class="trainItem" label="出发日期">
        <el-col :span="12">
          <el-date-picker
              type="date"
              placeholder="出发日期"
              v-model="date"
              class="animate__animated animate__fadeInRight"
              style="width: 100%;--animate-duration: 1.5s;"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"

          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-checkbox v-model="checked" label="只搜高铁/动车" size="large"/>
      <br/>
      <el-button id="trainDataCardSearchButton" @click="toSearch">搜索</el-button>
    </el-form>

    <el-form id="trainDataCardImag">
      <a href="http://www.qianlitu.cn/" target="_blank"><img src="../../assets/images-train/advertising.png"></a>
    </el-form>
  </div>


</template>

<script>
import {Switch, Search} from "@element-plus/icons-vue"
import router from "../../router"
import store from "../../store";

export default {
  name: "TrainDataCard",
  data() {
    return {
      Switch,
      startPlace: "",
      endPlace: "",
      date: "",
      checked: false
    }
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "北京"},
        {"value": "上海"},
        {"value": "广州"},
        {"value": "深圳"},
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    trainSwitch() {
      let temp = this.endPlace;
      this.endPlace = this.startPlace;
      this.startPlace = temp;
    },
    toSearch() {
      if (this.startPlace !== "" && this.endPlace !== "" && this.date !== "") {
        console.log(this.date)
        store.state.trainSearchInfo.check = this.checked;
        console.log(this.checked);
        store.state.trainSearchInfo.startPlace = this.startPlace;
        store.state.trainSearchInfo.endPlace = this.endPlace;
        store.state.trainSearchInfo.date = this.date;
        router.push(`/train-search-result`);
      } else if (this.startPlace === "") {
        alert("请输入出发城市");
      } else if (this.endPlace === "") {
        alert("请输入到达城市")
      } else if (this.date === "") {
        alert("请输入出发日期");
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.startPlace = "上海";
    this.endPlace = "北京";
    if(new Date().getDate()<10){
      this.date = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+'0'+new Date().getDate();
    }else {
      this.date = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate();
    }
  }

}
</script>

<style scoped>
#trainDataCardDiv {
  margin-top: 20px;
  margin-left: 150px;
  width: 1200px;
  height: 350px;
  /*border: 1px solid red;*/
}

#trainDataCardSearchForm {
  float: left;
  width: 400px;
  height: 350px;
  border: 1px solid cornflowerblue;
}

#trainDataCardImag {
  float: right;
  height: 350px;
  width: 780px;
}

#navigationDiv {
  text-align: left;
  color: #FFFFFF;
  height: 55px;
  background: #209EF6;
  display: flex;
  align-items: center;
}

#navigationDiv span {
  font-size: 25px;
  font-family: "仓耳渔阳体 W04", serif;
}

.trainInput {
  width: 150px;
}

.trainItem {
  margin-top: 20px;
  margin-left: 30px;
}

#trainDataCardSearchButton {
  color: #FFFFFF;
  background: rgba(238, 98, 5, 0.74);
  font-size: 20px;
  margin-right: 30px;
  width: 200px;
}

#exchange {
  position: absolute;
  top: 305px;
  left: 400px;
  width: 40px;
  height: 70px;
  border: 1px solid #b1adad;
  border-left: none;
}

.train_button {
  margin-top: 16px;
  background: rgba(47, 130, 255, 0.89);
  width: 30px;
  height: 30px;
}

</style>